<template>
    <!-- <div> -->
    <h1>--------------------hooks------------------</h1>
    <div class="box" ref="box">
        <img src="../../../public/vite.svg" :style="{ position: 'absolute', top: point.x + 'px', left: point.y + 'px' }">
    </div>
    <!-- </div> -->
</template>

<script>
// 引入提供获取鼠标位置能力的hook方法
import usePoint from "../../hooks/point"
// console.log(usePoint)
export default {
    setup() {
        //使用自定义的hook函数
        let { box, point } = usePoint()
        return {
            box,
            point
        }
    }
};
</script>

<style scoped>
.box {
    width: 100vw;
    height: 300px;
    background: #DDDD;
    position: fixed;
    top: 0;
    left: 0;
}
</style>
